<template>
    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" style='height:100vh;' :gap='30' v-if='$pcShow' @click='fnClick'>
        <div class='imgTitle' slot-scope="props" >{{imgsArr[props.index].title}}</div>
    </vue-waterfall-easy>

    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" style='height:100vh;' :imgWidth='100' :gap='30'
        v-else @click='fnClick'>
         <div slot="waterfall-head" style="text-align: center;background: white;height: 30px;line-height: 30px;">Ἥρα/Hera</div>
        <div class='imgTitle' slot-scope="props">{{imgsArr[props.index].title}}</div>
    </vue-waterfall-easy>
</template>


<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import api from '../../api/nsgame'
export default {
    name: 'app',
    components: {
        vueWaterfallEasy
    },
    mounted() {
        this.getPhoto()
    },
    data() {
        return {
            imgsArr: []
        }
    },
    methods: {
        async getPhoto() {
            try {
                let res = await api.getPhoto()

                res.data.forEach(item => {
                    item.src = item.img
                })
                this.imgsArr = res.data
            } catch (err) {
                console.log(err)
                err.data.forEach(item => {
                    item.src = item.img
                })
                this.imgsArr = err.data
            }
        },
        fnClick(event, { index, value }) {
            event.preventDefault()
            // 只有当点击到图片时才进行操作
            if (event.target.tagName.toLowerCase() == 'img') {
                console.log('img clicked', index, value)
                this.$router.push({path:'/photoDetail',query:{id:value.id}})
            }
        },
        getData() {
            for (var i = 1; i < 5; i++) {
                var randomH = Math.floor(Math.random() * 100) + 500
                this.imgsArr.push({ src: `https://source.unsplash.com/300x${randomH}` })
            }
        }
    },
}
// ::-webkit-scrollbar {
//     width: 0px;
// }
</script>

<style lang="">
.imgTitle {
    color: white;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #21212169;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
}
.vue-waterfall-easy-container .vue-waterfall-easy a.img-wraper > img {
    border-radius: 4px;
}
.vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
    position: relative;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    height: 19px !important;
    width: 19px !important;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    border-radius: 1px;
    background-color: transparent;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background-color: #a1a1a1;
    transition: all 0.3s;
}
</style>
